<template>
  <div class="detail-container">
    <div class="bar">
      <span @click="$router.back()">返回</span>
    </div>
    <van-image
      fit="cover"
      width="100%"
      height="200px"
      :src="singerInfo.artist?.cover"
    />
    <div class="singer-info">
      <van-image
        round
        style="margin-top: -35px"
        width="70px"
        height="70px"
        :src="singerInfo.artist?.avatar"
      />
      <div class="singer-info-name">
        {{ singerInfo.artist?.name }} <span class="v">v</span>
      </div>
      <div style="color: #b3b3b3; font-size: 12px; margin-bottom: 10px">
        {{ singerInfo.artist?.alias[0] }}
      </div>
      <div
        style="
          width: 200px;
          color: #b3b3b3;
          font-size: 14px;
          margin-bottom: 10px;
        "
      >
        {{ singerInfo.identify?.imageDesc }}
      </div>
      <div class="attention-btn">+ 关注</div>
    </div>

    <div class="music-list-wrap">
      <div style="font-size: 18px; height: 30px; line-height: 30px">
        <icon
          name="play-circle"
          color="#F53C3A"
          size="24"
          style="margin-right: 10px; vertical-align: middle"
        ></icon>
        <span style="vertical-align: middle">播放热门50</span>
      </div>
      <div class="music-list">
        <div class="music-item" v-for="(item, index) of songs" :key="item.id">
          <div style="display: flex; padding: 10px 0">
            <div class="music-index">{{ index + 1 }}</div>
            <div class="music-info">
              <div class="music-title">
                <span style="display: inline-block">{{ item.name }}</span>
              </div>
              <div class="music-sub-info">
                <span class="vip-tag tag" v-if="item.fee == 1">vip</span>
                <span class="sq-tag tag" v-if="item.sq">SQ</span>
                <span style="display: inline-block">
                  {{
                    item.ar
                      .reduce((pre, item) => pre + item.name + '/', '')
                      .substring(
                        0,
                        item.ar.reduce((pre, item) => pre + item.name + '/', '')
                          .length - 1
                      )
                  }}
                  - {{ item.al.name }}
                </span>
              </div>
              <div class="tag-award" v-if="item.awardName">
                {{ item.awardName }}
              </div>
            </div>
          </div>

          <div class="music-pay">
            <icon name="play-circle-o" color="#AFAFAF" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from 'vant';
export default {
  name: 'SingerDetail',
  components: { Icon },
  data() {
    return {
      songs: [],
      singerInfo: {},
    };
  },
  created() {
    this.id = this.$route.query.id || -1;
    this.getInfo();
    this.getSingerInfo();
  },
  methods: {
    getInfo() {
      this.$request('get', '/artist/top/song', { id: this.id }).then((res) => {
        console.log('列表歌曲', res);
        this.songs = res.songs;
      });
      console.log(this.id);
    },
    getSingerInfo() {
      this.$request('get', '/artist/detail', { id: this.id }).then((res) => {
        console.log('歌手信息', res);
        this.singerInfo = res.data;
      });
    },
  },
};
</script>

<style scoped>
.detail-container {
  font-weight: bolder;
  background-color: #f7f7f7;
  height: 100%;
}
.bar {
  padding: 10px;
  height: 30px;
  background-color: rgba(125, 125, 126, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
}
.singer-info {
  position: relative;
  z-index: 3;
  margin: -20px 10px 20px;
  border-radius: 10px;
  box-shadow: 0 8px 12px #ebedf0;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.singer-info-name {
  padding: 10px;
  font-size: 20px;
}

.v {
  background-color: #e94137;
  color: #fff;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  text-align: center;
  line-height: 20px;
  display: inline-block;
  margin-left: 2px;
}

.attention-btn {
  color: #fff;
  padding: 5px 20px;
  background-color: #f83e3d;
  border: none;
  border-radius: 20px;
  margin-bottom: 10px;
}

.music-list {
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.music-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.music-item .music-index {
  color: 18px;
  padding: 10px;
  color: #afafaf;
  display: flex;
  justify-content: center;
  align-items: center;
}
.music-item .music-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: self-start;
}
.music-item .music-info .tag-award {
  margin-top: 5px;
  color: #f9945f;
  background-color: #f8ece4;
  border-radius: 2px;
  padding: 2px;
  font-size: 20px;
  zoom: 0.5;
}

.music-item .music-info .music-title {
  color: rgb(63, 63, 63);
}

.music-item .music-info .music-sub-info {
  color: #afafaf;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.music-item .music-pay {
  font-size: 20px;
}

.music-list-wrap {
  overflow: hidden;
  margin: 10px 20px;
}

.tag {
  border-radius: 4px;
  margin-right: 4px;
  font-size: 20px;
  padding: 2px 4px;
  zoom: 0.5;
}
.vip-tag {
  border: 1px solid #ff7119;
  color: #ff7119;
}
.sq-tag {
  border: 1px solid #f83e3d;
  color: #f83e3d;
}
</style>
